<template>
  <div id="app">
    <h2>我是APP组件</h2>

    <!-- vue已注册的组件: 最终会渲染成a标签 -->
    <!-- activte-class 设置标签活跃状态时添加的class -->
    <!-- <router-link to="/home" replace active-class="active">首页</router-link> -->
    <!-- tag: 重新渲染可自定标签属性 -->
    <!-- replace: 直接替换url 不能进行前进与返回 -->
    <!-- <router-link to="/about" tag="button" replace active-class="active">关于</router-link> -->

  
    <!-- <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/about" tag="button" replace>关于</router-link> -->
    
    <!-- <button @click="homeclick">首页</button>
    <button @click="aboutclick">关于</button> -->


    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <!-- 动态绑定获取用户Id -->
    <!-- <router-link :to="/user/+userId">用户</router-link> -->

    <!-- 对象方式 -->
    <!-- <router-link :to="{
      path: '/profile',
      query: {
        name: 'why',
        age: 18,
        height: 1.88
      }
    }">档案</router-link> -->

    <!-- 点击方式函数传递 -->
    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>
    
    
    <!-- 占位显示：组件渲染位置 -->
    <!-- <router-view></router-view> -->

    <!-- keep-alive: 不会默认销毁组件, 不让组件频繁创建销毁,保持一个活着的状态, 将包裹组件缓存 -->
    <!-- include: 包含在内的组件有效缓存 -->
    <!-- exclude: 反之, 不管理 有多个时不要在逗号后面加上空格 -->
    <!-- 正则表达式也是如此 -->
    <keep-alive exclude="Profile,user">
      <router-view/>
    </keep-alive>
    
    
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId: "chen"
    }
  },
  methods: {
    homeclick() {
      // 通过代码的方式修改路由 vue-router
      // this.$router: vue在所有组件添加的属性
      // this.$router.push("/home")
      // 替换url 无法返回 前进：不可重复跳转
      this.$router.replace("/home")
    },
    aboutclick() {
      this.$router.push("/about")
    },
    userClick() {
      this.$router.replace('/user/' + this.userId)
    },
    profileClick() {
      this.$router.push({
        path: '/profile',
        query: {
          name: 'kobe',
          age: 19,
          height: 1.87
        }
      })
    }
  }
}
</script>
  
<style>
  .active {
    color: #f00;
  }
</style>
